import { useSettingStore } from '@/stores'
import { ref, markRaw, reactive } from 'vue'
import { setData } from 'el-plus-powerful-table-ts/es'
import { Edit, Remove } from '@element-plus/icons-vue'
import type { PowerfulTableHeader } from 'el-plus-powerful-table-ts'

export type Model = {
  priceConfigName: string
  priceConfigUuid: string
  createTime: number
  creatorName: string
  updateName: string
  updateTime: number
}

interface PowerfulTableData {
  list: Model[]
  header: any[]
  total: number
  listQuery: {
    pageNum: number
    pageSize: number
    priceConfigName: string
  }
}

export const defaultData = () => ({
  priceConfigUuid: '',
  priceConfigName: '',

  createTime: 0,
  creatorName: '',
  updateName: '',
  updateTime: 0,
})

export const useData = <Row = any>() => {
  const settingStore = useSettingStore()
  const header: PowerfulTableHeader<Row>[] = [
    {
      label: '价格配置名称', //显示的名称
      overflowTooltip: true,
      headerAlign: 'left',
      props: [
        {
          prop: 'priceConfigName',
        },
      ],
    },
    {
      label: '价格类型', //显示的名称
      headerAlign: 'left',
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'priceType',
        },
      ],
    },
    {
      label: '司机价格（元）', //显示的名称
      headerAlign: 'left',
      props: [
        {
          prop: 'driverShowPrice',
        },
      ],
    },
    // {
    //   label: '出发地', //显示的名称
    //   headerAlign: 'left',
    //   props: [
    //     {
    //       prop: 'departureAddress',
    //     },
    //   ],
    // },
    // {
    //   label: '目的地', //显示的名称
    //   headerAlign: 'left',
    //   props: [
    //     {
    //       prop: 'destinationAddress',
    //     },
    //   ],
    // },
    {
      label: '包车时间(小时)', //显示的名称
      headerAlign: 'left',
      props: [
        {
          prop: 'hours',
        },
      ],
    },
    {
      label: '价格 （单位元）', //显示的名称
      headerAlign: 'left',
      props: [
        {
          prop: 'price',
        },
      ],
    },
    {
      label: '品牌', //显示的名称
      headerAlign: 'left',
      props: [
        {
          prop: 'brandName',
        },
      ],
    },
    {
      label: '车系', //显示的名称
      headerAlign: 'left',
      props: [
        {
          prop: 'seriesName',
        },
      ],
    },
    {
      label: '车型', //显示的名称
      headerAlign: 'left',
      width: 200,
      props: [
        {
          prop: 'modelName',
        },
      ],
    },
    {
      label: '配置来源', //显示的名称
      headerAlign: 'left',
      width: 220,
      props: [
        {
          prop: 'configSourceName',
        },
      ],
    },
    {
      label: '添加时间', //显示的名称
      headerAlign: 'left',
      width: 180,
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'createTime',
        },
      ],
    },
    {
      label: '更新时间', //显示的名称
      headerAlign: 'left',
      width: 180,
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'updateTime',
        },
      ],
    },
    {
      label: '创建人', //显示的名称
      headerAlign: 'left',
      props: [
        {
          prop: 'creatorName',
        },
      ],
    },
    {
      label: '操作', //显示的标题
      fixed: 'right',
      headerAlign: 'left',
      minWidth: '200px',
      props: [
        {
          type: 'btn',
          prop: '',
          data: setData<'btn'>([
            {
              text: '编辑',
              params: 'edit',
              property: {
                type: 'primary',
                icon: markRaw(Edit),
              },
            },
            {
              text: '删除',
              params: 'remove',
              property: {
                type: 'danger',
                icon: markRaw(Remove),
              },
            },
          ]),
        },
      ],
    },
  ]
  // 编辑区显隐
  const isDialog = ref(false)

  // 弹窗开关
  const switchs = reactive({
    role: false,
    edit: false,
  })

  const powerfulTableData: PowerfulTableData = reactive({
    list: [],
    header: header,
    total: 0,
    listQuery: {
      pageNum: 1,
      pageSize: 10,
      priceConfigName: '',
    },
  })


  // row 数据
  const currentForm = ref<Model>(defaultData())

  // 品牌列表
  const listData = ref<{ label: string; value: string }[]>([])

  return {
    header,
    switchs,
    isDialog,
    powerfulTableData,
    currentForm,
    listData,
  }
}
